<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="showList" @isIt = "isIt" @change="change" @delTask="delTask"></TodoMain>
    <TodoFooter :list="showList" @clear="clear" @isAll="isAll"></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      // list: [
      //   { id: 1, name: "吃饭", isDone: true },
      //   { id: 2, name: "睡觉", isDone: false },
      //   { id: 3, name: "打豆豆", isDone: true },
      // ],
      list :JSON.parse(localStorage.getItem('list')),
      type: "all",
    };
  },
  methods: {
    change(id) {
      const obj = this.list.find((item) => item.id === id);
      obj.isDone = !obj.isDone;
    },
    delTask(id) {
      const index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    clear() {
      this.list = this.list.filter((item) => !item.isDone);
    },
    add(taskName) {
      this.list.push({
        id: Date.now(),
        name: taskName,
        isDone: false,
      });
    },
    isAll(type) {
      this.type = type;
    },
    isIt(val) {
     this.list.forEach(item => item.isDone = val);
    }
   
  }, 
  computed: {
      showList() {
        if (this.type === "all") {
          return this.list;
        } else if (this.type === "active") {
          return this.list.filter((item) => !item.isDone);
        } else {
          return this.list.filter((item) => item.isDone);
        }
      },
    },
    watch: {
      list : {
        deep:true,
        handler() {
          localStorage.setItem('list',JSON.stringify(this.list))
        }
      }
    }
};
</script>

<style></style>
